import { defineComponent, PropType, toRaw, ref } from 'vue';
import { Button } from 'ant-design-vue';
import qs from 'qs';
import { ReqParam, ShortTouch } from '@/domain/dataBoard/types/shortclass/touch';
import { ChildId, CommonReqParam, ErrorChildId } from '@/domain/dataBoard/types/common';
import PageTable from '../../components/pageTable';
import SearchList from '../../components/searchList';
import { useTouchData } from '@/domain/dataBoard/hooks/shortClass/touch';
import Total from '../../components/total';
import LineChart from '../../components/lineChart/lineChart';
import { downLoadUrl } from '@/domain/dataBoard/api/download';
import { Page, selectParam } from '@/domain/common/types/page';

export default defineComponent({
  name: 'shortTouchBase',
  props: {
    childId: {
      type: Number as PropType<ChildId>,
      default: ErrorChildId.DefaultChildId
    },
    add: {
      type: Function as PropType<(title: string, id: number) => void>,
      required: true
    }
  },
  setup(props, { slots }) {
    const {
      IDString,
      dataSource,
      rowlist,
      paging,
      searchParam,
      columnlist,
      searchList,
      trendList,
      setSizeChange,
      loadTable,
      getSelectRowsCallBack,
      opGroupCallBack,
      reloadList,
      overview
    } = useTouchData(props.childId);

    const cellClick = (prop: string, record: ShortTouch, relevant: number) => {
      if (props.add) {
        const child_id = relevant ? relevant : record.child_id;
        props.add(record[prop as keyof ShortTouch].toString(), child_id);
      }
    };
    // 搜索查询
    const searchInfo = async (param: selectParam) => {
      const params: selectParam = {};
      // 重置请求参数
      for (let key in param) {
        if (Array.isArray(param[key as keyof ReqParam])) {
          params[key] = (param[key] as Array<number>).join(',');
        } else {
          params[key] = param[key as keyof ReqParam];
        }
      }
      rowlist.value = (await loadTable(toRaw(params))).data.datas;
    };
    // 搜索重置
    const resetSearch = async (params: Partial<ReqParam>, reset: Function) => {
      reset();
      Object.keys(searchParam).forEach((item) => {
        if (item !== 'child_id') {
          delete searchParam[item as keyof Partial<Page | CommonReqParam | Partial<ShortTouch & Page>>];
        }
      });
      searchParam.page = 1;
      searchParam.pageSize = 10;
      // rowlist.value = (await loadTable(param)).data.datas;
    };
    return () => (
      <>
        <div class={'relative'}>
          <SearchList searchList={searchList.value} onResetEvent={resetSearch} onSearchEvent={searchInfo} />
        </div>
        <Total overview={overview.value} />

        <div class={' relative'}>
          <div class={'title-h mt-8'}>趋势数据</div>
          <div class={'flex'}>
            {trendList.value?.map((trendItem, index) => {
              let style: { [key: string]: string | number } = { flex: 1 };
              if (index === 0) {
                style.marginRight = '1.8rem';
              }
              return <LineChart dataset={trendItem.data} title={trendItem.title} style={style} />;
            })}
          </div>
        </div>

        <div class={' relative'}>
          <div class={'title-h mt-8 justify-between'}>
            明细数据
            <div>
              <a
                class={'text-xs text-red-650 hover:text-red-700 border border-red-650 px-4 py-1.5'}
                style={{ borderRadius: '2px' }}
                download
                href={downLoadUrl + '?' + qs.stringify(toRaw(searchParam))}
              >
                导出数据
              </a>
            </div>
          </div>
        </div>
        <div class={'overflow-auto'}>
          <PageTable
            rowKey="id"
            cellClick={cellClick}
            getSelectRowsCallBack={getSelectRowsCallBack}
            paging={paging.value}
            columnlist={columnlist.value}
            tableList={dataSource.value}
            isOpGroup={false}
            sizeChange={setSizeChange}
            opGroupCallBack={opGroupCallBack}
          />
        </div>
      </>
    );
  }
});
